﻿var n=chnNum;
function addToMenu(){
    var menu=document.getElementById("menu");    
    for(var i=1;i<=n;i++){ 
        var o=document.createElement("li");        
        $('.tab_box div:gt(0)').hide();
        if(i==1)o.className="selected";
        o.innerHTML="CHN "+i; 
        $(o).click(function(){
		    $(this).addClass('selected').siblings().removeClass('selected');
		    var index = $('.tab_menu li').index($(this));		   
		    $('.tab_box div').eq(index).show().siblings().hide();
	    }).hover(function(){	    
		    $(this).addClass('hover');
	    },function(){
		    $(this).removeClass('hover');
	    });
        
        menu.appendChild(o);        
    }
}

function addToBoxByMedia(){
    var box=document.getElementById("box");    
    for(var i=0;i<n;i++){
        var o=document.createElement("div");
        var _tab="";               
        _tab='<table cellspacing="0" class="table" width="100%">';
        _tab+='<tr><td align="left" valign="top" width="100">';
        _tab+='<table style="border-collapse:collapse; border-right:none; " cellspacing="0">';
        _tab+='<tr><td class="nav" style="background-color:#eee;color:#000;font-size:11pt;font-weight:bolder" onclick="selected();" title="1">AV Setting</td></tr>';
        _tab+='<tr><td class="nav" onclick="selected();"  title="2">Main Stream</td></tr>';
        _tab+='<tr><td class="nav" onclick="selected();" title="3">Sub Stream</td></tr>'; 
        _tab+='<tr><td class="nav" onclick="selected();" title="4">OSD Setting</td></tr>';
        _tab+='<tr><td class="nav" onclick="selected();" title="5">Serial Port Setting</td></tr>';
		_tab+='<tr><td class="nav" onclick="selected();" title="6">Video Info</td></tr>';
        _tab+='</table></td>';
        _tab+='<td valign="top" class="tag" style="display:block"><table>';
        _tab+='<tr><td align="right" style="width:40% ;height:28px">Image Mode:</td><td><select name="norm" class="select"><option value="0">PAL</option><option value="1">NTSC</option></select></td></tr>';
        _tab+='<tr><td align="right" style="width:40% ;height:28px">Image Style:</td><td><select name="mode" class="select"><option value="0">Normal</option><option value="1">Mirror</option></select></td></tr>';
        _tab+='<tr><td align="right" style="width:40% ;height:28px">Audio Encoding:</td><td><select name="audio" class="select"><option value="0">None</option><option value="1">G711A</option><option value="2">G711U</option><option value="3">ADPCM</option><option value="4">G726</option><option value="5">AMR</option><option value="6">AMRDTX</option><option value="7">ACC</option><option value="8">G722</option><option value="9">G7231</option><option value="10">G728</option><option value="11">G729</option><option value="12">MP1</option><option value="13">MP2</option><option value="14">MP3</option><option value="15">MPEG2</option><option value="16">AC3</option></select></td></tr>';
        _tab+='<tr><td align="right" style="width:40% ;height:28px">Audio Channel:</td><td><select name="audChn" class="select">';
        for(var j=0;j<n;j++)
        {
        _tab+='<option value='+(j+1)+'>CHN '+(j+1)+'</option>';
        }
        _tab+='</select></td></tr>';
	    _tab+='</table></td>';
        _tab+='<td class="tag" valign="top"><table style="height:100%;border-collapse:collapse;border:none;">';
        _tab+='<tr><td style="height:28px" align="right">Image Encoding:</td><td><select name="codec" class="select"><option value="0">H261</option><option value="1">H263</option><option value="2">MPEG2</option><option value="3">MPEG4</option><option value="4">H264</option><option value="5">MJPEG</option><option value="6">AVS</option></select></td></tr>'; 
        _tab+='<tr><td style="width:40%;height:28px" align="right">Image Resolution:</td><td><select name="size" class="select"><option value="0">QCIF</option><option value="1">CIF</option><option value="2">HD1</option><option value="3">4CIF</option><option value="4">D1</option><option value="5">MD1</option><option value="6">QVGA</option><option value="7">VGA</option><option value="8">SXGA</option><option value="9">UXGA</option><option value="10">QXGA</option><option value="11">WXGA</option><option value="12">WSXGA</option><option value="13">WUXGA</option><option value="14">WQXGA</option><option value="15">HD720</option><option value="16">HD1080</option></select></td></tr>';               
        _tab+='<tr><td align="right" style="height:28px">FramRate:</td><td><input type="text" name="frames"  class="text"/></td></tr>';  
         _tab+='<tr><td align="right" style="height:28px">Image Quality:</td><td><select name="qos" class="select"><option value="0">Best</option><option value="1">Better</option><option value="2">Good</option><option value="3">Bad</option><option value="4">Worse</option></select></td></tr>';
         _tab+='<tr><td align="right" style="height:28px">BitRate(k):</td><td><input type="text" name="rate"  class="text"/></td></tr>';
        _tab+='<tr><td style="height:28px" align="right">Encoding Control:</td><td><select name="vbr" class="select"><option value="0">CBR</option><option value="1">VBR</option></select></td></tr>';       
        _tab+='<tr><td align="right" style="height:28px">Key Frame:</td><td><input type="text" name="iframe"  class="text"/></td></tr></table></td>';                       
        _tab+='<td class="tag" valign="top"><table cellspacing="0" style="margin-top:5;">';        
        _tab+='<tr><td style="height:28px" align="right">Image Encoding:</td><td><select name="codec1" class="select"><option value="0">H261</option><option value="1">H263</option><option value="2">MPEG2</option><option value="3">MPEG4</option><option value="4">H264</option><option value="5">MJPEG</option><option value="6">AVS</option></select></td></tr>';
        _tab+='<tr><td style="width:40%;height:28px" align="right">Image Resolution:</td><td><select name="size1" class="select"><option value="0">QCIF</option><option value="1">CIF</option><option value="2">HD1</option><option value="3">4CIF</option><option value="4">D1</option><option value="5">MD1</option><option value="6">QVGA</option><option value="7">VGA</option><option value="8">SXGA</option></select></td></tr>';
        _tab+='<tr><td align="right" style="height:28px">FramRate:</td><td><input type="text" name="frames1"  class="text"/></td></tr>';      
        _tab+='<tr><td align="right" style="height:28px">Image Quality:</td><td><select name="qos1" class="select"><option value="0">Best</option><option value="1">Better</option><option value="2">Good</option><option value="3">Bad</option><option value="4">Worse</option></select></td></tr>';         
        _tab+='<tr><td align="right" style="height:28px">BitRate(k):</td><td><input type="text" name="rate1"  class="text"/></td></tr>';
        _tab+='<tr><td style="height:28px" align="right">Encoding Control:</td><td><select name="vbr1" class="select"><option value="0">CBR</option><option value="1">VBR</option></select></td></tr>';
        _tab+='<tr><td align="right" style="height:28px">Key Frame:</td><td><input type="text" name="iframe1"  class="text"/></td></tr></table></td>';               
        _tab+='<td class="tag" align="left" valign="top" >';
        _tab+='<table style="height:100%;border-collapse:collapse;border:none;">';        
       // _tab+='<tr><td align="right" style="width:40% ;height:28px">Show Time:</td><td><input type="checkbox" name="timeEn" />Yes</td></tr>';
        _tab+='<tr><td align="right" style="height:28px">Show Date:</td><td><input type="checkbox" name="weekEn" />Yes</td></tr>';
       _tab+='<tr><td align="right" style="width:40% ;height:28px">Show Time:</td><td><select name="timeEn" class="select"><option value="0">HIDE</option><option value="1">LEFT_TOP</option><option value="2">LEFT_BOTTOM</option><option value="3">RIGHT_TOP</option><option value="4">RIGHT_BOTTOM</option></select></td></tr>'; 
         //_tab+='<tr><td align="right" style="height:28px">Time Location X:</td><td><input name="timeX" class="text" /></td></tr>';
        //_tab+='<tr><td align="right" style="height:28px">Time Location Y:</td><td><input name="timeY" class="text" /></td></tr>';
        //_tab+='<tr><td align="right" style="height:28px">Show Text:</td><td><input type="checkbox" name="textEn"/>Yes</td></tr>';       
        _tab+='<tr><td align="right" style="width:40% ;height:28px">Show Text:</td><td><select name="textEn" class="select"><option value="0">HIDE</option><option value="1">LEFT_TOP</option><option value="2">LEFT_BOTTOM</option><option value="3">RIGHT_TOP</option><option value="4">RIGHT_BOTTOM</option></select></td></tr>'; 
        //_tab+='<tr><td align="right" style="height:28px">Text Location X:</td><td><input name="textX" class="text" /></td></tr>';
        //_tab+='<tr><td align="right" style="height:28px">Text Location Y:</td><td><input name="textY" class="text" /></td></tr>';
        _tab+='<tr><td align="right" style="height:28px">Text Content:</td><td><input name="text"  class="text" /></td></tr></table></td>';        
         _tab+='<td class="tag" align="left" valign="top" >';
         _tab+='<table style="height:100%;border-collapse:collapse;border:none;">';
         _tab+='<tr><td align="right" style="width:40%;height:28px">Serial Port Type:</td><td><select name="pType" class="select"><option value="0">RS485</option><option value="1">RS232<option></select></td></tr>';
         _tab+='<tr><td align="right" style="height:28px">Serial Port Index:</td><td><input type="text" name="pNo" class="text"/></td></tr>';
        _tab+='<tr><td align="right" style="height:28px">PTZ ADDR:</td><td><input type="text"name="pAddr" class="text"/></td></tr>';
        _tab+='<tr><td align="right" style="height:28px">PTZ Protocal:</td><td><select name="pProtocol" class="select"><option value="PELCO-D">PELCO-D</option><option value="PELCO-P">PELCO-P</option><option value="SONY-D31">SONY-D31</option><option value="SONY-D100">SONY-D100</option><option value="YAAN">YAAN</option><option value="SAMSUNG">SAMSUNG</option></select></td></tr>';
         _tab+='<tr><td align="right" style="height:28px">Baudrate:</td><td><select name="pRate" class="select"><option value="300">300</option><option value="1200">1200</option><option value="2400">2400</option><option value="4800">4800</option><option value="9600">9600</option><option value="19200">19200</option><option value="38400">38400</option></select></td></tr>';
        _tab+='<tr><td align="right" style="height:28px">Flow Control:</td><td><select name="pFlow" class="select"><option value="0">None</option><option value="1">SOFT</option><option value="2">Hardware</option></select></td></tr>';   
        _tab+='<tr><td align="right" style="height:28px">Data Bits:</td><td><select name="pData" class="select"><option value="5">5</option><option value="6">6</option><option value="7">7</option><option value="8">8</option></select></td></tr>';
        _tab+='<tr><td align="right" style="height:28px">Stop Bits:</td><td><select name="pStop" class="select"><option value="1">1</option><option value="2">2</option></select></td></tr>';
        _tab+='<tr><td align="right" style="height:28px">Parity:</td><td><select name="pParity" class="select"><option value="0">None</option><option value="1">Odd</option><option value="2">Even</option></select></td></tr></table></td>';              
       		
		 _tab+='<td class="tag" align="left" valign="top" >';
         _tab+='<table style="height:100%;border-collapse:collapse;border:none;">';         
         _tab+='<tr><td align="right" style="width:40%;height:28px">Channel ID:</td><td><input type="text" name="chnId" class="text"/></td></tr>';
        _tab+='<tr><td align="right" style="height:28px">Channel Name:</td><td><input type="text"name="chnName" class="text"/></td></tr></table>';
         _tab+='</tr></table>'; 
        o.innerHTML=_tab;
        box.appendChild(o);
    }  
}
function selected(){
    var obj=event.srcElement;    
    var index=Math.floor(obj.title);
    var node=obj.parentNode; 
    setNormal(node); 
    setSelected(obj);
    node=GetParentNode(node); 
    node=node.parentNode;    
    for(var i=1;i<=6;i++){
        var panel=node.cells[i];
        panel.style.display="none";
   }
   node.cells[index].style.display="block";
}
function GetParentNode(obj){
    if(obj.tagName=="td" || obj.tagName=="TD"){
        return obj; 
    }else{
        obj=obj.parentNode; 
        return GetParentNode(obj);
    } 
}
function setNormal(obj){
    var _table=obj.parentNode;
    for(var i=0;i<=5;i++){
        var _td= _table.rows[i].childNodes[0];
        _td.style.backgroundColor="#ccccff"; 
        _td.style.fontSize="9pt";
        _td.style.color="#2b7dbb";
        _td.style.fontWeight="normal";
    }   
}
function setSelected(obj){
    obj.style.backgroundColor="#eee";
    obj.style.color="#000"; 
    obj.style.fontSize="11pt";
    obj.style.fontWeight="bolder";
}
function AddNumBtn(){
    var box=document.getElementById("switchBox");
    for(var i=1;i<=chnNum;i++){
         switch(i){
            case 1:{
                var _tr=box.insertRow();
                var _td1=_tr.insertCell();
                _td1.className="iconcells"; 
                _td1.innerHTML='<div class="screen1" title="Single Screen" onmouseover="this.className=\'screen1_1\';" onmouseout="this.className=\'screen1\';" onclick="MultiScreen(1)" />'; 
                var _td2=_tr.insertCell();
                _td2.innerHTML='<table><tr><td valign="middle" class="unselect" align="left" onmouseover="this.className=\'mouseover\';this.style.borderWidth=\'1\'; " onmouseout="this.className=\'unselect\';" onclick="MultiScreen(1)">Single Screen</td></tr></table>'; 
                break;
            } 
            case 4:{
                var _tr=box.insertRow();
                var _td1=_tr.insertCell();
                _td1.className="iconcells"; 
                _td1.innerHTML='<div class="screen4" title="4 Screens" onmouseover="this.className=\'screen4_1\';" onmouseout="this.className=\'screen4\';" onclick="MultiScreen(4)" />'; 
                var _td2=_tr.insertCell();
                _td2.innerHTML='<table><tr><td valign="middle" class="unselect" align="left" onmouseover="this.className=\'mouseover\';this.style.borderWidth=\'1\'; " onmouseout="this.className=\'unselect\';" onclick="MultiScreen(4)">4 Screens</td></tr></table>'; 
                break;
            }
            case 6:{
                var _tr=box.insertRow();
                var _td1=_tr.insertCell();
                _td1.className="iconcells"; 
                _td1.innerHTML='<div class="screen6" title="6 Screens" onmouseover="this.className=\'screen6_1\';" onmouseout="this.className=\'screen6\';" onclick="MultiScreen(6)" />'; 
                var _td2=_tr.insertCell();
                _td2.innerHTML='<table><tr><td valign="middle" class="unselect" align="left" onmouseover="this.className=\'mouseover\';this.style.borderWidth=\'1\'; " onmouseout="this.className=\'unselect\';" onclick="MultiScreen(6)">6 Screens</td></tr></table>'; 
                break;
            } 
            case 8:{
                var _tr=box.insertRow();
                var _td1=_tr.insertCell();
                _td1.className="iconcells"; 
                _td1.innerHTML='<div class="screen8" title="8 Screens" onmouseover="this.className=\'screen8_1\';" onmouseout="this.className=\'screen8\';" onclick="MultiScreen(8)" />'; 
                var _td2=_tr.insertCell();
                _td2.innerHTML='<table><tr><td valign="middle" class="unselect" align="left" onmouseover="this.className=\'mouseover\';this.style.borderWidth=\'1\'; " onmouseout="this.className=\'unselect\';" onclick="MultiScreen(8)">8 Screens</td></tr></table>'; 
                break;
            }
            case 9:{
                var _tr=box.insertRow();
                var _td1=_tr.insertCell();
                _td1.className="iconcells"; 
                _td1.innerHTML='<div class="screen9" title="9 Screens" onmouseover="this.className=\'screen9_1\';" onmouseout="this.className=\'screen9\';" onclick="MultiScreen(9)" />'; 
                var _td2=_tr.insertCell();
                _td2.innerHTML='<table><tr><td valign="middle" class="unselect" align="left" onmouseover="this.className=\'mouseover\';this.style.borderWidth=\'1\'; " onmouseout="this.className=\'unselect\';" onclick="MultiScreen(9)">9 Screens</td></tr></table>'; 
                break;
            } 
            case 10:{
                var _tr=box.insertRow();
                var _td1=_tr.insertCell();
                _td1.className="iconcells"; 
                _td1.innerHTML='<div class="screen10" title="10 Screens" onmouseover="this.className=\'screen10_1\';" onmouseout="this.className=\'screen10\';" onclick="MultiScreen(10)" />'; 
                var _td2=_tr.insertCell();
                _td2.innerHTML='<table><tr><td valign="middle" class="unselect" align="left" onmouseover="this.className=\'mouseover\';this.style.borderWidth=\'1\'; " onmouseout="this.className=\'unselect\';" onclick="MultiScreen(10)">10 Screens</td></tr></table>'; 
                break;
            } 
            case 16:{
                var _tr=box.insertRow();
                var _td1=_tr.insertCell();
                _td1.className="iconcells"; 
                _td1.innerHTML='<div class="screen16" title="16 Screens" onmouseover="this.className=\'screen16_1\';" onmouseout="this.className=\'screen16\';" onclick="MultiScreen(16)" />'; 
                var _td2=_tr.insertCell();
                _td2.innerHTML='<table><tr><td valign="middle" class="unselect" align="left" onmouseover="this.className=\'mouseover\';this.style.borderWidth=\'1\'; " onmouseout="this.className=\'unselect\';" onclick="MultiScreen(16)">16 Screens</td></tr></table>'; 
                break;
            } 
         }
    }  
    var _tr=box.insertRow();
    var _td=_tr.insertCell();    
}